<!-- 回款详情-下面的table表格组件  -->
<template>
  <div class="returned-record">
    <h3>回款记录</h3>
    <TableTurn
      :table-data="getData"
      ref="tableRef"
      :args="args"
      :is-show-pagination="false"
    >
      <a-table-column :width="80" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        title="回款编号"
        :width="150"
        dataIndex="collectionNumber"
        align="center"
      ></a-table-column>
      <a-table-column
        title="回款类型"
        :width="150"
        dataIndex="collectionTypeName"
        align="center"
      ></a-table-column>
      <a-table-column
        title="回款方式"
        :width="150"
        dataIndex="payMode"
        align="center"
      ></a-table-column>
      <a-table-column
        title="账户名称"
        :width="150"
        dataIndex="accountName"
        align="center"
      ></a-table-column>
      <a-table-column
        title="账号"
        :width="150"
        dataIndex="accountNumber"
        align="center"
      ></a-table-column>
      <a-table-column
        title="开户行"
        :width="150"
        dataIndex="accountBank"
        align="center"
      ></a-table-column>
      <a-table-column
        title="回款时间"
        :width="150"
        dataIndex="collectionTime"
        align="center"
        ><template #cell="{ record }">
          {{ dayjs(record.createdAt).format('YYYY-MM-DD') }}
        </template></a-table-column
      >
      <a-table-column
        title="回款金额"
        :width="150"
        dataIndex="collectionPrice"
        align="center"
      >
        <template #cell="{ record }">
          <span>￥{{ record.collectionPrice }}</span>
        </template></a-table-column
      >

      <!-- 操作item -->
      <a-table-column align="center" :width="300" fixed="right" title="操作">
        <template #cell="{ record, rowIndex }">
          <a-button type="text" @click="goEdit(record.id)">编辑</a-button>
          <a-popconfirm
            @ok="deleteItem(record.id, rowIndex)"
            content="确定删除吗"
            type="error"
          >
            <a-button type="text">删除</a-button>
          </a-popconfirm>
        </template>
      </a-table-column>
    </TableTurn>
    <ReturnedMoneyEnter
      v-if="isReturnedVisible"
      v-model:visible="isReturnedVisible"
      :id="ReturnFormId"
      @editReturnedEmit="editReturnedEmit"
    ></ReturnedMoneyEnter>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed, watch } from 'vue';
  import { useRoute } from 'vue-router';

  import dayjs from 'dayjs';
  import * as apiList from '@/api/order-management/returned-management/base-setting';
  import { GetClientOrderDetail } from '@/api/order-management/client-order/index';

  import { cloneDeep } from 'lodash';
  import ReturnedMoneyEnter from '../returned-money-enter/index.vue';

  // 表格配置
  const args = reactive({
    stripe: true,
    scroll: {
      y: 500,
    },
    bordered: {
      headerCell: true,
    },
  });
  const tableRef = ref();
  const isReturnedVisible = ref(false);
  const props = withDefaults(
    //参数说明
    defineProps<{
      titleData: any;
    }>(),
    {
      titleData: [],
    }
  );
  const route = useRoute();
  const id = Number(route.query.id);
  const emit = defineEmits(['update:visible', 'editinvoiceInfo']);
  const ReturnFormId = ref();
  const amountData = ref();

  // 获取表格数据
  const getData = async (page: any) => {
    try {
      const res = await GetClientOrderDetail({ id });
      return Promise.resolve(res.collectionRecords);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // watch(
  //   () => props.orderId,
  //   (val) => {
  //     if (!val)
  //   }
  // );

  // 查看凭证
  const viewVoucher = (record: any) => {};

  // 编辑按钮
  const goEdit = (id: any) => {
    isReturnedVisible.value = true;
    ReturnFormId.value = id;
    amountData.value = cloneDeep(props.titleData);
    // ReturnFormData.value = record;
  };

  const editReturnedEmit = async (formdata: any) => {
    await apiList.putCollectionInfo({ ...formdata });
    tableRef.value.loadData();
  };

  // 删除一项
  const deleteItem = async (id: number, rowIndex: number) => {
    const res = await apiList.delCollectionInfo({ id });
    tableRef.value.loadData();
  };
</script>

<style scoped lang="less">
  .returned-record {
    // margin-top: 50px;
    :deep(.arco-table-tr) {
      height: 50px;
    }
  }
</style>
